import React, { useReducer, useState } from "react";

export default function ReducerCom() {
  // let [count, setCount] = useState(0);
  // useReducer 的第一个参数为 reducer 函数
  // state 用来接收当前的状态值   
  // action 动作对象 
      // {type: 'add', payload: 1}  //type 类型 payload 载荷
      // {type: 'sub', payload: 2}
      // {type: 'times', payload: 3}
  let [state, dispatch] = useReducer((state, action) => {
    //回调函数的执行时机: 当状态在发生变化的时候, 执行(调用 dispatch 的时候)
    //回调函数的返回值: 返回值将作为状态的新的值
    // dispatch: 派遣, 分发任务  dispatch({type: 'add', payload: 1})
    switch(action.type){
      //新增操作
      case 'add':
        return state + action.payload;
      //减少操作
      case 'sub':
        return state - action.payload;
      //乘法操作
      case 'times':
        return state * action.payload;
      default:
        return state;
    }
  }, 100);

  //
  return (
    <div>
      <h2>{state}</h2>
      <button onClick={() => dispatch({type: 'add', payload: 1})}>+1</button>
      <button onClick={() => dispatch({type: 'sub', payload: 1})}>-1</button>
      <button onClick={() => dispatch({type: 'times', payload: 2})}>*2</button>
    </div>
  );
}
